<template>
  <div class="query-ul">
    <div class="query-label">{{ sjx.label }}：</div>
    <div class="query-li" :class="active === null?'active':''" @click="selectObject(null)"><span>全部</span></div>
    <div v-for="(item,index) in dataList" :key="'o-'+index" :class="active === item.id ?'active':''" class="query-li" @click="selectObject(item.id)"><span>{{ item.name }}</span></div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { requestGet } from '@/api/system/common'
export default {
  name: 'QueryList',
  props: {
    sjx: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      dataList: [],
      active: null
    }
  },
  watch: {
    sjx: {
      handler() {
        this.initData()
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initData() {
      let url = 'rest/api/guest/temp/v2/column/analysis/sjx'
      if (getToken()) {
        url = 'rest/api/temp/v2/column/analysis/sjx'
      }
      requestGet(url, { sjx: this.sjx.sjx })
        .then(res => {
          const { data } = res
          this.dataList = data.data
        }).catch(() => {
          this.dataList = []
        })
    },
    selectObject(id) {
      if (undefined === id || id === null) {
        this.active = null
      } else {
        this.active = id
      }
      this.$emit('callBack', { id: this.sjx.sjx, value: this.active })
    }
  }
}
</script>

<style scoped>
.query-ul {
  width: 100%;
  height: initial;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.query-label {
  flex:  0 1 auto;
  padding: 15px 12px;
  box-sizing: border-box;
  width: 105px;
  font-weight: 600;
  font-size: 16px;
  color: var(--edu-text-100);
}
.query-li {
  flex: 0 1 auto;
  padding: 15px 12px;
  box-sizing: border-box;
  font-weight: 400;
  cursor: pointer;
}
.query-li span{
  padding: 4px 5px;
  box-sizing: border-box;
  font-size: 0.9rem;
  color: var(--edu-text-100);
}
.active span,.query-li:hover span {
  background-color: var(--edu-hover-bg-100);
  color: var(--edu-hover-color-200);
  border-radius: 4px;
}
</style>
